<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>运动专题</title>


  <!-- <link rel="stylesheet" type="text/css" href="../css/style.css" /> -->
  <style>
    * {
      margin: 0;
    }


    .circular {
      position: relative;
      height: 100vh;
      background-color: #09C;
    }

    .circular .ball {
      top: 20%;
      left: 50%;
      cursor: pointer;
      background: #fff;
      width: 50px;
      height: 50px;
      position: absolute;
      border-radius: 50%;
    }

    .line {
      width: 80%;
      height: 1px;
      background-color: rgba(230, 230, 230, 0.8);
      position: absolute;
      top: 50%;
      left: 10%;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }

    .line2:before {
      content: "";
      width: 0;
      height: 0;
      border-bottom: 10px solid #fff;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      position: absolute;
      left: -5px;
      top: 0;
    }

    .line2 {
      height: 80%;
      width: 1px;
      background-color: rgba(230, 230, 230, 0.8);
      position: absolute;
      top: 10%;
      left: 50%;
    }

    .line:before {
      content: "";
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-left: 10px solid #fff;
      border-bottom: 5px solid transparent;
      position: absolute;
      right: 0;
      top: -5px;
    }
  </style>
</head>

<body>

  <div class="circular">
    <h2>圆周运动</h2>
    <div class="ball"></div>
    <div class="line"></div>
    <div class="line2"></div>
  </div>

  <script>
    var container = document.querySelector('.circular'),
      ball = container.querySelector('.circular .ball'),
      startX = (container.offsetWidth * 0.5) - (ball.offsetWidth * 0.5),   // x轴中心
      startY = (container.offsetHeight * 0.5) - (ball.offsetHeight * 0.5); // y轴中心

    function circularMove(Dom, xR = 200, yR = xR, startX = 0, startY = 0, degree = 0, speed = 3) {
      function circularAni() {
        degree += speed;
        //计算弧度,js的三角函数必须传入弧度
        const rad = Math.PI / 180 * degree;
        //计算大圆上每一个A的x,y
        const x = Math.sin(rad) * xR;
        const y = Math.cos(rad) * yR;

        Dom.style.left = x + startX + 'px';
        Dom.style.top = y + startY + 'px';

        requestAnimationFrame(circularAni)
      };
      requestAnimationFrame(circularAni)
    }
    circularMove(ball, 400, 200, startX,startY)
  </script>

</html>